import { TravelOutline, LocationFill } from 'antd-mobile-icons'
import styles from '../css/CityLocation.module.css'
import { useLoaderData } from 'react-router-dom'

function CityLocation(props) {
  const loaderData = useLoaderData()

  return (
    <div className={styles.location}>
      <span>当前城市：</span>
      {loaderData.city ? (
        <>
          <LocationFill
            color="#22A3ED"
            fontSize={18}
            className={styles.icon}
          />
          <span onClick={() => props.myfn(loaderData.city.replace('市', ''))}>
            {loaderData.city}
          </span>
        </>
      ) : (
        <>
          <TravelOutline
            color="#EA2424"
            fontSize={18}
            className={styles.icon}
          />
          <span>定位中...</span>
        </>
      )}
    </div>
  )
}

export default CityLocation
